<template>
    <div>
        <van-cell-group>
            <van-cell :title="itemTitle" icon="wap-nav" />
        </van-cell-group>
        <ve-histogram :data="chartData"></ve-histogram>
    </div>
</template>
<script>
import { getMockList } from "../../api/api.js";
import Vue from "vue";
//单元格组件
import { Cell, CellGroup } from "vant";
Vue.use(Cell).use(CellGroup);

export default {
    data() {
        return {
            itemTitle: "电影票房排行",
            chartData: {
                columns: ["电影名称", "票房"],
                rows: [
                    // {
                    //     "电影名称": "我不是药神",
                    //     "票房": 1393
                    // },
                    // {
                    //     "电影名称": "西虹市首富",
                    //     "票房": 4593
                    // }
                ]
            }
        };
    },
    methods: {},
    created() {
        getMockList("in_theaters").then(res => {
            console.log(res);
            res.forEach(item => {
                if (item.collect_count > 100000) {
                    let obj = {
                        "电影名称": item.title,
                        "票房": item.collect_count
                    };
                    this.chartData.rows.push(obj);
                }
            });
        });
    }
};
</script>
<style lang="less">
</style>


